<template>
  <div class="upload-works">
    <!-- <div class="title">上传作品</div> -->
    <div class="works-info">
      <MyHeader>
        <div slot="title">作品信息</div>
      </MyHeader>
      <div class="works-info-form">
        <el-form
          label-width="20px"
          :model="worksForm"
          :rules="workRules"
          ref="worksForm"
        >
          <el-form-item prop="name" class="isRequired">
            <el-input
              v-model="worksForm.name"
              placeholder="请输入作品名称"
            ></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="11">
              <el-form-item prop="type" class="isRequired">
                <el-select
                  v-model="worksForm.type"
                  placeholder="请选择作品类型"
                  @change="handleType"
                >
                  <el-option
                    v-for="(item, index) in typeOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.data_id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11" style="float: right">
              <el-form-item prop="type_child" class="isRequired">
                <el-select
                  v-model="worksForm.type_child"
                  placeholder="请选择作品系列"
                >
                  <el-option
                    v-for="(item, index) in seriesList"
                    :key="index"
                    :label="item.name"
                    :value="item.data_id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="work_type" class="isRequired">
            <el-select @change="workTypeChange" v-model="worksForm.work_type" placeholder="请选择作品类型" filterable>
              <el-option label="图片" :value="1"></el-option>
              <el-option label="视频" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="worksForm.work_type == 1" prop="material">
            <el-input v-model="worksForm.material" placeholder="请输入作品材质"></el-input>
          </el-form-item>
          <el-form-item prop="introduction">
            <el-input placeholder="作品简介" v-model="worksForm.introduction" />
          </el-form-item>
        </el-form>
      </div>
      <MyHeader>
        <div slot="title">上传{{ worksForm.work_type == 1 ? "图片" : "视频" }}</div>
      </MyHeader>
      <div :class="['upload-image', worksForm.work_type == 2 ? 'upload-video' : '']">
        <uploadImg
          @setCardPic="setImgPic"
          @showProcess="showUpVidepProcess"
          @getVideoName="getVideoName"
          ref="imgPath"
          :type="worksForm.work_type == 1 ? 'image' : 'video'"
          :api="worksForm.work_type == 1 ? 'uploadBigImg' : 'uploadVideo'"
          :params="imgParams"
          class="isRequired upload-img"
          multiple
          :showImg="false"
          :btn="worksForm.work_type == 2"
          bigImage
        >
          <div v-show="worksForm.work_type == 2" class="upload-video-btn" slot="button">上传视频</div>
        </uploadImg>
        <el-row v-if="worksForm.work_type == 2">
          <el-col :span="7">
            <div :title="video_name" class="video-name">
              {{ video_name }}
            </div>
          </el-col>
          <el-col :offset="2" :span="15">
            <el-col :span="3">
              {{ idCardUploadPercentage == 100 ? '上传完成' : idCardUploadPercentage > 0 ? '上传中' : '' }}
            </el-col>
            <el-col :span="21">
              <div class="process">
                <el-progress
                  style="margin: 5px"
                  :width="70"
                  color="#E0CBB4"
                  v-if="idVideoCardIsUpload"
                  :percentage="idCardUploadPercentage"
                ></el-progress>
                <div v-show="idCardUploadPercentage == 100">
                  上传完成
                </div>
              </div>
            </el-col>
          </el-col>
        </el-row>
       <div v-if="worksForm.work_type == 1">
        <div class="show-img" v-for="(item, index) in worksForm.opus_id" :key="index" alt="">
          <div class="marks-delete all-center" @click="deleteImg(item)">
            <i class="el-icon-delete"></i>
          </div>
          <el-image :src="getBigImg(item.id)" fit="cover" class="show-img">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
       </div>
       <ul v-else>
        <el-link type="primary" @click="goVideo(worksForm.work_video)">
          {{ worksForm.work_video }}
        </el-link>
      </ul>
      </div>
      <MyHeader>
        <div slot="title">作品介绍</div>
      </MyHeader>
      <div class="work-introduce">
        <el-form
          :model="introduceForm"
          label-width="100px"
          :rules="introduceRules"
          ref="introduceForm"
        >
          <el-form-item prop="work_detail" label="详情">
            <el-input
              v-model="introduceForm.work_detail"
              type="textarea"
              resize="none"
              show-word-limit
            />
          </el-form-item>
          <el-form-item prop="work_explain" label="说明">
            <el-input
              v-model="introduceForm.work_explain"
              type="textarea"
              resize="none"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="解读">
            <uploadImg
              @setCardPic="setVideo($event, 'videoPath')"
              @showProcess="showProcess"
              ref="videoPath"
              type="audio"
              api="uploadVideo"
              :params="videoParams"
              class="upload-video"
              btn
            >
              <div class="upload-video-btn" slot="button">上传音频</div>
            </uploadImg>
            <uploadImg
              @setCardPic="setVideo($event, 'videoPath')"
              @showProcess="showProcess"
              ref="videoPath"
              type="video"
              api="uploadVideo"
              :params="videoParams"
              class="upload-video"
              btn
            >
              <div class="upload-video-btn" slot="button">上传视频</div>
            </uploadImg>
            <div class="import-btn" @click="importVideo">导入音频或视频</div>
            <div class="video-list" v-for="(item, index) in worksForm.work_appraise" :key="index">
              {{ item }}<i @click="delIcon(index)" class="delete-icon el-icon-delete-solid" />
            </div>
            <div class="process">
              <el-progress
                style="margin: 5px"
                :width="70"
                v-if="idCardIsUpload"
                :percentage="idCardUploadPercentage"
              ></el-progress>
            </div>
          </el-form-item>
          <el-dialog
            title="导入视频"
            :visible.sync="importVisible"
            center
            @close="importClose"
            top="40vh"
            width="720px"
          >
            <el-form :model="importForm" :rules="importRules" ref="importForm">
              <el-form-item prop="url" class="is-required">
                <el-input
                  v-model="importForm.url"
                  placeholder="请输入视频链接"
                ></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="importSubmit('importForm')"
                >确 定</el-button
              >
              <el-button @click="importClose">取 消</el-button>
            </span>
          </el-dialog>
          <!-- <el-form-item label="解读">

          </el-form-item> -->
        </el-form>
      </div>
      <MyHeader>
        <div slot="title">上传封面</div>
        <div slot="secondTitle">建议尺寸为800*600像素</div>
      </MyHeader>
      <div class="upload-cover">
        <uploadImg
          @setCardPic="setCoverPic($event, 'coverPath')"
          ref="coverPath"
          type="image"
          api="uploadImage"
          :params="coverParams"
        />
      </div>
      <div class="repres-work work-switch" v-if="worksForm.work_type == 1">
        <el-switch
          @change="handleRepores"
          v-model="is_famous"
          active-text="设为代表作"
          active-color="#DCB992"
          inactive-color="#ccc"
        >
        </el-switch>
      </div>
      <div v-if="worksForm.work_type == 1" class="sell work-switch">
        <el-switch
          @change="handleSell"
          v-model="is_sell"
          active-text="是否出售"
          active-color="#DCB992"
          inactive-color="#ccc"
        >
        </el-switch>
        <div v-show="is_sell" class="price-section">
          价格区间（元）
          <el-input placeholder="最低价" v-model="price_min" class="price" />
          -
          <el-input placeholder="最高价" v-model="price_max" class="price" />
        </div>
      </div>
      <div class="btn-box">
        <div class="release-btn" @click="releaseSubmit('worksForm')">发布</div>
        <!-- <div @click="handlePreview" class="preview-btn">预览</div> -->
        <div @click="releaseSubmit('worksForm', true)" class="draft">
          草稿箱
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "../component/common/myHeader";
import uploadImg from "@/components/uploadImg.vue";
import { getBigImg } from "@/utils/downloadFile";
export default {
  name: "",
  middleware: 'identityInfo',
  components: {
    MyHeader,
    uploadImg,
  },
  props: ['data_id'],
  data() {
    return {
      art_info: {},
      importVisible: false,
      idCardIsUpload: false, // 是否需要进度条
      idVideoCardIsUpload: false, // 是否需要进度条
      idCardUploadPercentage: 0, // 上传进度(仅视频有进度条)
      imgParams: {},
      coverParams: {},
      video_name: "",
      worksForm: {
        name: "",
        type: "",
        work_type: 1,
        type_child: "",
        introduction: "",
        art_id: '',
        thumbnail: '',
        opus_id: [],
        work_appraise: [],
        material: "",
        work_video: ""
      },
      introduceForm: {
        work_detail: '',
        work_explain: ''
      },
      importForm: {
        url: "",
      },
      importRules: {
        url: [
          {
            required: true,
            message: "请输入视频链接",
            trigger: "blur",
          },
        ],
      },
      introduceRules: {
        work_detail: [
          {
            required: true,
            message: "请输入作品详情",
            trigger: "blur",
          },
        ],
        work_explain: [
          {
            required: true,
            message: "请输入作品说明",
            trigger: "change",
          },
        ]
      },
      workRules: {
        name: [
          {
            required: true,
            message: "请输入作品名称",
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择类型",
            trigger: "change",
          },
        ],
        type_child: [
          {
            required: true,
            message: "请选择系列",
            trigger: "change",
          },
        ],
        work_type: [
          {
            required: true,
            message: "请选择作品类型",
            trigger: "change",
          },
        ]
      },
      videoParams: {
        op: "upload_file"
      },
      typeOptions: [],
      imgPath: "",
      coverPath: "",
      price_min: "",
      price_max: "",
      is_famous: false,
      is_sell: false, // 是否出售
      image_list: [],
      seriesList: [],
      productType: [],
      artFamousData: []
    };
  },
  computed: {},
  watch: {
    data_id(val) {
      if(val) {
        console.log(val)
        this.getProductType();
      } else {
        this.resetForm()
      }
    }
  },
  created() {},
  mounted() {
    this.artFamous()
    this.art_info = this.$store.state.user.info?.user_info?.art_info
    console.log('art_info', this.$store.state)
    this.worksForm.art_id = this?.art_info?.data_id
    this.imgParams = {
      // id: 'upload'
    };
    this.coverParams = {
      // 接口除form外的其他参数
      op: 'upload_file'
    };
    this.getProductType()
  },
  methods: {
    getBigImg,
    delIcon(index) {
      this.worksForm.work_appraise.splice(index, 1)
    },
    getProductType() {
      this.$api.getProductType({}, {}).then((res) => {
        this.typeOptions = res.result.item_list.filter(item => item.parent_id == -1)
        this.productType = res.result.item_list
        if (this.data_id) {
          this.getWorkInfo(this.data_id)
        }
      });
    },
    // 获取艺术家代表作
    artFamous() {
      this.$api.artFamous({ art_id: this.$store.state.user.info.user_info?.art_info?.data_id }).then(res => {
        this.artFamousData = Array.isArray(res.result.item_list) ? res.result.item_list.filter(item => item.thumbnail)[0] : []
      })
    },
    getWorkInfo(data_id) {
      this.$api.getWorkInfo({ data_id: data_id }).then(res => {
        console.log(res)
        if (res.status == '$SUCCESS') {
          // this.worksForm = {
          //   ...res.result
          // }
          this.worksForm.name = res.result.name
          this.worksForm.type = res.result.type
          this.handleType(this.worksForm.type)
          this.worksForm.type_child = res.result.type_child
          this.worksForm.introduction = res.result.introduction
          this.worksForm.material = res.result.material
          this.worksForm.art_id = res.result.art_id
          this.worksForm.opus_id = res.result.opus_id
          this.worksForm.thumbnail = res.result.thumbnail
          this.price_min = res.result.price_min
          this.price_max = res.result.price_max
          this.is_famous = res.result.is_famous == 1 ? true : false
          this.is_sell = res.result.is_sell == 1 ? true : false
          this.introduceForm.work_detail = res.result.work_detail
          this.introduceForm.work_explain = res.result.work_explain
          this.$refs.coverPath.setEditImg(res.result.thumbnail)
          this.worksForm.work_appraise = Array.isArray(res.result.work_appraise) ? res.result.work_appraise : []

          this.image_list = this.worksForm.opus_id.map(ele => {
            return {
              image_src_url: '/upload/' + ele.image_name,
              image_src_type: 'local',
              image_name: ele.image_name,
              type: 1,
              access_type: 0,
              note: ""
            }
          })
        }
      })
    },
    showProcess(idCardIsUpload, idCardUploadPercentage) {
      this.idCardUploadPercentage = idCardUploadPercentage
      this.idCardIsUpload = idCardIsUpload
    },
    showUpVidepProcess(idCardIsUpload, idCardUploadPercentage) {
      this.idCardUploadPercentage = idCardUploadPercentage
      this.idVideoCardIsUpload = idCardIsUpload
    },
    getVideoName(video_name) {
      this.video_name = video_name
    },
    workTypeChange() {
      if (this.worksForm.work_type == 2) {
        this.imgParams.op = 'upload_file'
      } else {
        this.imgParams = {}
      }
    },
    goVideo(http) {
      window.open(http, '_blank')
    },
    setVideo(path, pic) {
      this.idCardUploadPercentage = 100
      console.log(path, pic);
      this.worksForm.work_appraise.push(path)
    },
    // 打开导入视频弹窗
    importVideo() {
      this.importVisible = true;
    },
    importClose() {
      this.importVisible = false;
      this.$refs.importForm.resetFields();
    },
    deleteImg(item) {
      this.worksForm.opus_id = this.worksForm.opus_id.filter(ele => {
        return ele.id !== item.id
      })
      this.image_list = this.worksForm.opus_id.map(ele => {
        return {
          image_src_url: '/upload/' + ele.image_name,
          image_src_type: 'local',
          image_name: ele.image_name,
          type: 1,
          access_type: 0,
          note: ""
        }
      })
    },
    setImgPic(path, idCardImgUrl) {
      // this.form[pic] = path
      if (this.worksForm.work_type === 1) {
        this.image_list.push({
          image_src_url: path,
          image_src_type: "local",
          image_name: path.replace('/upload/', ''),
          type: 1,
          access_type: 0,
          note: "",
          idCardImgUrl: idCardImgUrl
        })
        this.$api.createdBigImg({ image_list: this.image_list }, {}).then(res => {
          console.log(res)
          this.worksForm.opus_id = res.result
          console.log(this.worksForm)
        })
      } else {
        this.worksForm.work_video = path;
      }
      console.log(path, idCardImgUrl);
    },
    setCoverPic(path, pic) {
      this.worksForm.thumbnail = path
      // console.log(path, pic);
    },
    // 预览
    handlePreview() {
      console.log('预览')
    },
    handleDraft() {
      console.log('放入草稿箱')
    },
    resetForm() {
      this.$refs.worksForm.resetFields()
      this.$refs.introduceForm.resetFields()
      for(const key in this.worksForm) {
        this.worksForm[key] = ''
        if (key == 'opus_id' || key == 'work_appraise') {
          this.worksForm[key] = []
        }
      }
      this.image_list = []
      this.$refs.imgPath.setEditImg()
      this.$refs.coverPath.setEditImg()
    },
    releaseSubmit(formName, draft) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('this.work', this.worksForm)
          const data = {
            ...this.introduceForm,
            ...this.worksForm,
            art_id: this?.art_info?.data_id,
            price_max: this.price_max - 0,
            price_min: this.price_min - 0,
            is_famous: this.is_famous ? 1 : 0,
            is_sell: this.is_sell ? 1 : 0,
            recycle: draft ? 1 : 0
            // ...params
          }
          let api
          if (this.data_id) {
            api = 'updateArtWorks'
          } else {
            api = 'createArtWorks'
          }
          this.$api[api]({...data}, { data_id: this.data_id ? this.data_id : '' }).then(res => {
            if (res.status == '$SUCCESS') {
              this.$message.success("发布成功");
              this.$router.push({ path: '/editPersonalHome', query: { menuActive: 1 } })
              this.resetForm()
            }
          })
          console.log(data)
        }
      });
    },
    // 选择作品类型
    handleType(value) {
      // console.log(this.typeOptions, value)
      this.seriesList = this.productType.filter(i => {
        return value == i.parent_id
      })
      console.log(this.seriesList)
    },
    handleRepores() {
      this.artFamousData
      if (this.artFamousData && this.artFamousData.length >= 3) {
        this.is_famous = false
        this.$message.error('代表作超过数量，可先去编辑其他作品')
      }
      console.log(this.is_famous);
    },
    handleSell() {
      console.log(this.is_sell);
    },
    getWorksSeries() {
      this.$;
    },
  },
};
</script>

<style scoped lang="less">
.upload-works {
  // padding: 60px 276px 80px;

  // .title {
  //   font-size: 30px;
  //   font-weight: 800;
  //   color: #000;
  //   line-height: 30px;
  //   margin-bottom: 40px;
  // }

  .upload-video-btn,
    .import-btn {
      width: 220px;
      height: 48px;
      font-size: 16px;
      color: #333;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      // margin-right: 40px;
      cursor: pointer;
    }

    .upload-video-btn {
      background: #e0cbb4;
    }

  .isRequired {
    position: relative;
    // display: inline-block;
  }

  .upload-img {
    display: inline-block;
  }


  .work-introduce {
    background: #fff;
    padding: 40px 217px 40px 40px;
    margin-bottom: 40px;

    ::v-deep(.el-textarea__inner) {
      height: 122px;
      background-color: #f3f4f4;
      border-radius: 0;
    }

    ::v-deep(.el-form-item) {
      margin-bottom: 40px;
    }

    ::v-deep(.el-input__count) {
      background-color: #f3f4f4;
    }

      .video-list {
        margin-bottom: 10px;
        font-size: 18px;

        .delete-icon {
          cursor: pointer;
        }
      }

      .upload-video {
        display: inline-block;
      }

      .import-btn {
        border: 1px solid #ccc;
      }

    .is-required::before {
      content: "";
    }
  }

  .isRequired::before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .works-info {
    .works-info-form {
      padding: 40px 218px 40px 35px;
      margin-bottom: 40px;
      background: #fff;

      ::v-deep(.el-select) {
        width: 100%;
      }

      ::v-deep(.el-input__inner) {
        background-color: #f3f4f4;
        border-radius: 0;
        height: 50px;
      }

      ::v-deep(input::-webkit-input-placeholder) {
        color: #999;
      }

      ::v-deep(.el-form-item__content) {
        line-height: normal;
      }
    }

    .upload-image {
      padding: 40px 0 40px 61px;
      background: #fff;
      margin-bottom: 40px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      &.upload-video {
        display: block;

        ::v-deep(.upload-video-btn) {
          width: 220px;
          height: 48px;
          font-size: 16px;
          color: #333;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          // margin-right: 40px;
          cursor: pointer;
          background-color: #e0cbb4;
        }
      }

      .show-img {
        width: 402px;
        height: 302px;
        border: 1px solid #ccc;
        margin-bottom: 22px;
        margin-right: 20px;
        position: relative;
        display: inline-block;

        ::v-deep(.el-image) {
          width: 100%;
          height: 100%;
        }

        .marks-delete {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: #000;
          opacity: 0;
          z-index: 9;

          i {
            font-size: 50px;
          }

          &:hover {
            opacity: 0.7;
            cursor: pointer;
          }
        }

        &:nth-child(3n) {
          margin-right: 0;
        }
      }

      ::v-deep(.avatar-uploader .el-upload) {
        border: 1px solid #ccc;
        margin-right: 20px
      }

      ::v-deep(.div-plus) {
        width: 402px;
        height: 302px;
      }

      .isRequired::before {
        left: -20px;
      }
    }

    .upload-cover {
      padding: 40px 0 40px 61px;
      background: #fff;

      ::v-deep(.avatar-uploader .el-upload) {
        border: 1px solid #ccc;
      }

      ::v-deep(.div-plus) {
        width: 402px;
        height: 302px;
      }
    }

    ::v-deep(.el-switch__label *) {
      color: #333;
      font-size: 16px;
    }

    .work-switch {
      width: 100%;
      height: 68px;
      background: #fff;
      display: flex;
      align-items: center;
      padding-left: 68px;
      border-top: 1px solid #f3f4f4;
      border-bottom: 1px solid #f3f4f4;
    }

    .sell {
      border-top: 0;
      // margin-bottom: 60px;

      .price-section {
        display: inline-block;
        font-size: 14px;
        color: #333;
        margin-left: 60px;

        .price {
          width: 150px;
          margin-right: 8px;

          &:last-child {
            margin-left: 8px;
          }

          ::v-deep(.el-input__inner) {
            height: 40px;
            border-radius: 0;
          }
        }
      }
    }

    .btn-box {
      .release-btn,
      .preview-btn {
        width: 220px;
        height: 48px;
        font-size: 16px;
        color: #333;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 40px;
        cursor: pointer;
      }

      .release-btn {
        background: #e0cbb4;
      }

      .preview-btn {
        border: 1px solid #ccc;
      }

      .draft {
        font-size: 16px;
        font-weight: 400;
        color: #C5A37D;
        float: right;
        cursor: pointer;
      }
    }

    .btn-box {
      margin-top: 60px;
    }
  }
}
</style>
